<script setup lang="ts">
import {onLoad} from "@dcloudio/uni-app";
import {reqGoodsDetail} from "@/api/goods";
import {ref} from "vue";
import {useCommonStore} from "@/store/common";
import {reqSaveUserCollection} from "@/api/user";
import {useCarStore} from "@/store/car";
import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html'

const commonStore = useCommonStore()
const carStore = useCarStore()

const info = ref<any>({})
const images = ref([])
onLoad(async (e: any) => {
  await reqGoodsDetail(e.id).then((res: any) => {
    if (res.code == 200) {
      info.value = res.data
      images.value = res.data.images.map((item: any) => {
        return "https://" + item
      });
      if (res.data.directory) {
        directory.value = res.data.directory.split(",")
      }
      loading.value = false
    }
  })

})

const toComment = () => {
  uni.navigateTo({
    url: '/pages/home/comment/comment?id=' + info.value.id
  })
}

const loading = ref(true)

const content = `<image style="max-width:100%;height:auto;float:left;display:block" src='http://img50.ddimg.cn/99999990483793520.jpg'></image>`

const price = Math.random() * 100

const directory = ref([])

const showCar = ref(false)

const count = ref(1)

const totalPrice = ref(0)

const buy = () => {
  totalPrice.value = info.value.price * count.value
  commonStore.goodsItem = []
  info.value.count = count.value
  commonStore.goodsItem.push(info.value)
  showCar.value = false
  count.value = 1
  uni.navigateTo({
    url: '/pages/user/order/orderCreate/orderCreate?id=' + info.value.id + '&count=' + count.value + '&totalPrice=' + totalPrice.value
  })
}

const collect = async () => {
  info.value.isCollect = !info.value.isCollect
  await reqSaveUserCollection({goodsId: info.value.id, status: info.value.isCollect ? '1' : '0'}).then((res: any) => {
    if (res.code == 200) {

    } else {
      info.value.isCollect = !info.value.isCollect
      uni.showToast({
        title: "操作失败",
        icon: 'none'
      })
    }
  })
}

const joinCar = () => {
  carStore.addCar(info.value)
  uni.showToast({
    title: "加入购物车成功",
    icon: 'none'
  })
}

const back = () => {
  uni.navigateBack()
}
</script>

<template>
  <view class="bar"></view>

  <u-skeleton
      rows="4"
      rowsWidth="100vw"
      :loading="loading"
      rowsHeight="150rpx"
      :animate="true"
      :title="true"
  >
    <view class="goods-detail">
      <image @click="back()" class="image" src="/static/images/back.png"/>
      <u-swiper
          :height="300"
          :list="images"
      ></u-swiper>
      <view class="goods-name">
        <view style="line-height: 60rpx;">
          <view>
            <text style="color: red;font-size: 30rpx">￥</text>
            <text style="color: red;font-size: 50rpx">{{ info.price }}</text>
            <text style="text-decoration: line-through;font-size: 30rpx;color:#a6a5a5;margin-left: 15rpx">
              ￥{{ (parseFloat(info.price) + parseFloat(price)).toFixed(2) }}
            </text>
          </view>
        </view>
        <h4>
          <span class="tag">书香阁自营</span>
          {{ info.goodsName }}
        </h4>
        <view style="margin-top: 20rpx;font-size: 25rpx;color: #969696">
          <text>{{ info.goodsTitle }}</text>
        </view>
      </view>

      <view class="header">
        <view class="header-item">
          <text style="width: 140rpx;font-weight: 600">作者</text>
          <text style="flex:1">{{ info.author }}&nbsp;著</text>
          <u-icon name="arrow-right"></u-icon>
        </view>
        <u-line/>
        <view class="header-item">
          <text style="width: 140rpx;font-weight: 600">出版社</text>
          <text style="flex:1">{{ info.publishingHouse }}</text>
          <u-icon name="arrow-right"></u-icon>
        </view>
        <u-line/>
        <view class="header-item">
          <text style="width: 140rpx;font-weight: 600">出版时间</text>
          <text style="flex:1">{{ info.timePublication }}</text>
          <u-icon name="arrow-right"></u-icon>
        </view>
      </view>


      <view class="offer">
        <view class="header-item">
          <text style="width: 140rpx;font-weight: 600">运费</text>
          <text style="flex:1">免运费</text>
          <u-icon name="arrow-right"></u-icon>
        </view>
        <u-line/>
        <view class="header-item" @click="">
          <text style="width: 140rpx;font-weight: 600">保障</text>
          <text style="flex:1" class="u-line-1">正平保障 · 7天无理由退换 · 退货运费险，负担一定金额退货运费</text>
          <u-icon name="arrow-right"></u-icon>
        </view>
      </view>

      <view class="comment">
        <view class="header-item" @click="">
          <text style="width: 70rpx;font-weight: 600">评论</text>
          <text style="flex:1" class="u-line-1">（{{ info.commentsTotal }}）条</text>
          <view style="display: flex" @click="toComment()">
            <text style="margin-right: 10rpx">全部</text>
            <u-icon name="arrow-right"></u-icon>
          </view>
        </view>

        <view>
          <comment-item v-for="(item,index) in info.comments" :index="index" :item="item"></comment-item>
        </view>

      </view>

      <image src="/static/images/home/4.jpg" style="width: 95%;height: 250rpx;margin: 20rpx;border-radius: 20rpx"/>

      <view class="content">
        <view style="display: flex;margin: 10rpx 20rpx">
          <u-icon name="star-fill"/>
          <h4 style="margin-left: 10rpx">产品特色</h4>
        </view>

        <!--        <u-parse :content="`<img style='width: 100%;height: 100%' src='${info.detailImage}'></img>`"></u-parse>-->

        <mp-html
            :content="`<img style='max-width:100%;height:auto;float:left;display:block' src='${info.detailImage}'></img>`"/>

        <img src="" style="float: left;display: block">

        <view>
          <view class="content-item">
            <u-icon name="edit-pen-fill" size="23"/>
            <h4 style="margin-left: 10rpx">内容简介</h4>
          </view>
          <view style="margin: 20rpx;text-indent: 2em;">
            <text>
              {{ info.contentIntro }}
            </text>
          </view>
        </view>

        <view>
          <view class="content-item">
            <u-icon name="account-fill" size="23"/>
            <h4 style="margin-left: 10rpx">作者简介</h4>
          </view>
          <view style="margin: 20rpx;text-indent: 2em;">
            <text>
              {{ info.authorIntro }}
            </text>
          </view>
        </view>

        <view>
          <view class="content-item">
            <u-icon name="file-text" size="23"/>
            <h4 style="margin-left: 10rpx">目录</h4>
          </view>
          <view class="direction">
            <text v-for="(item, index) in directory" :key="item">
              {{ item }}
            </text>
          </view>
        </view>

        <view>
          <view class="content-item">
            <u-icon name="info" size="23"/>
            <h4 style="margin-left: 10rpx">出版信息</h4>
          </view>
          <view style="line-height: 100rpx">
            <view style="margin: 20rpx;">
              <view style="display: flex;align-items: center">
                <text style="color: #B0B0B0;width: 150rpx">书名</text>
                <text style="font-weight: 600;line-height: 40rpx">{{ info.goodsName }}</text>
              </view>
              <u-line/>
              <view style="display: flex;align-items: center">
                <text style="color: #B0B0B0;width: 150rpx">作者</text>
                <text style="font-weight: 600;">{{ info.author }}&nbsp;著</text>
              </view>
              <u-line/>
              <view style="display: flex;align-items: center">
                <text style="color: #B0B0B0;width: 150rpx">出版社</text>
                <text style="font-weight: 600;">{{ info.publishingHouse }}</text>
              </view>
              <u-line/>
              <view style="display: flex;align-items: center">
                <text style="color: #B0B0B0;width: 150rpx">出版时间</text>
                <text style="font-weight: 600;">{{ info.timePublication }}</text>
              </view>
              <view style="display: flex;align-items: center">
                <text style="color: #B0B0B0;width: 150rpx">开本</text>
                <text style="font-weight: 600;">{{ info.openBook }}</text>
              </view>
              <u-line/>
              <view style="display: flex;align-items: center">
                <text style="color: #B0B0B0;width: 150rpx">纸张</text>
                <text style="font-weight: 600;">{{ info.paper }}</text>
              </view>
              <view style="display: flex;align-items: center">
                <text style="color: #B0B0B0;width: 150rpx">包装</text>
                <text style="font-weight: 600;">{{ info.packing }}</text>
              </view>
              <u-line/>
            </view>
          </view>
        </view>

      </view>

      <view class="navigation">
        <view class="left">
          <view class="item car">
            <u-badge class="car-num" :count="9" type="error" :offset="[-3, -6]"></u-badge>
            <img style="width: 35rpx;height: 35rpx" src="http://47.115.220.79:1314/profile/sxg_1711884979047.png" alt="">
            <view class="text u-line-1">店铺</view>
          </view>
          <view class="item">
            <u-icon name="server-fill" :size="20" :color="$u.color['contentColor']"></u-icon>
            <view class="text u-line-1">客服</view>
          </view>
          <view class="item" @click="collect()">
            <u-icon v-if="info.isCollect == false" name="star" :size="20"></u-icon>
            <u-icon v-else name="star-fill" :size="20" color="#FF7900"></u-icon>
            <view class="text u-line-1">收藏</view>
          </view>
        </view>
        <view class="right">
          <view class="cart btn u-line-1" @click="joinCar()">加入购物车</view>
          <view class="buy btn u-line-1" @click="showCar = true">立即购买</view>
        </view>
      </view>

      <u-popup :show="showCar" @close="showCar = false">
        <view style="padding: 20rpx">
          <view style="display: flex;align-items: end">
            <image style="width: 200rpx;height: 200rpx" :src="images[0]"></image>
            <view style="display: flex;flex-direction: column">
              <text style="font-size: 40rpx;color: red">￥{{ info.price }}</text>
              <text>请选择&nbsp;数量</text>
            </view>
          </view>
          <u-line style="margin: 20rpx 0"/>
          <view style="display: flex;justify-content: space-between;align-items: center;">
            <text>数量</text>
            <u-number-box
                v-model="count"
                color="#ffffff"
                bgColor="#FF9E29"
                iconStyle="color: #fff"
            ></u-number-box>
          </view>
          <view style="height: 200rpx"></view>
          <up-button color="#FF9E29" shape="circle" @click="buy()" text="确定"></up-button>

        </view>
      </u-popup>

    </view>
  </u-skeleton>


</template>

<style scoped lang="scss">

.comment {
  margin: 20rpx;
  height: auto;
  padding: 5rpx 15rpx;
  background: white;
  border-radius: 15rpx;
}

.goods-detail {
  width: 100vw;
  height: 100%;
  background: rgba(238, 238, 238, 0.72);

  .offer {
    margin: 20rpx;
    padding: 5rpx 15rpx;
    background: white;
    border-radius: 15rpx;
  }

  .header {
    margin: 20rpx;
    padding: 5rpx 15rpx;
    background: white;
    border-radius: 15rpx;
  }

  .header-item {
    display: flex;
    justify-content: space-between;
    margin: 30rpx 0;
  }

  .image {
    width: 60rpx;
    height: 60rpx;
    position: fixed;
    margin: 20rpx;
    z-index: 9999;
  }

  .tag {
    font-size: 20rpx;
    background: #F56C6C;
    color: white;
    padding: 5rpx;
    border-radius: 5rpx;
  }

  .goods-name {
    padding: 20rpx;
    margin: 20rpx;
    background: white;
    border-radius: 15rpx;
  }

}

.content {

  .content-item {
    display: flex;
    margin: 10rpx 20rpx;
    align-items: center;

  }

  .direction {
    margin: 20rpx;
    display: flex;
    flex-direction: column;
    line-height: 50rpx;
  }
}

.navigation {
  position: fixed;
  bottom: 0;
  width: 100vw;
  display: flex;
  margin-top: 100rpx;
  border: solid 2rpx #f2f2f2;
  background-color: #ffffff;
  padding: 16rpx 0;

  .left {
    display: flex;
    font-size: 20rpx;

    .item {
      margin: 0 20rpx;

      &.car {
        text-align: center;
        position: relative;

        .car-num {
          position: absolute;
          top: -10rpx;
          right: -10rpx;
        }
      }
    }
  }

  .right {
    display: flex;
    flex: 1;
    font-size: 28rpx;
    align-items: center;
    margin-left: 30rpx;

    .btn {
      line-height: 66rpx;
      padding: 0 30rpx;
      border-radius: 36rpx;
      color: #ffffff;
    }

    .buy {
      flex: 1;
      text-align: center;
      background-color: #ff7900;
      margin-right: 20rpx;
    }

    .cart {
      text-align: center;
      background-color: #ed3f14;
      margin-right: 30rpx;
      flex: 1;
    }
  }
}

</style>
